import { color } from "echarts";

const colors0 = ["#6BFF7F", "#FF6B70", "#FCEE87", "#95B6FF", "#FAA124"];
const colors1 = ["#269936", "#99262A", "#C7B31E", "#95B6FF", "#C67A2E"];
const colorList1 = [
  // "#CBFFCA ",
  "#CAD7FF",
  "#FFFBCA",
  "#FFE1CA",
  "#FFCACC",
  "#CDCDCD",
];
const colorList2 = [
  // "#08E804 ",
  "#043DE8",
  "#E8D904",
  "#E86704",
  "#E80410",
  "#9F9F9F",
];
export const mixins = {
  data() {
    return {
      familyUseElecChart: null,
      alarmTypeChart: null,
      elecAnalysisChart: null,
      alarmStatisticsChart: null,
    };
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
    if (this.alarmTypeChart) {
      this.alarmTypeChart.dispose(); // 清理图表实例
    }
    if (this.elecAnalysisChart) {
      this.elecAnalysisChart.dispose(); // 清理图表实例
    }
    if (this.alarmStatisticsChart) {
      this.alarmStatisticsChart.dispose(); // 清理图表实例
    }
  },
  methods: {
    // 户用电量分析
    setFamilyUseElec(obj, DomId) {
      this.familyUseElecChart = this.$echarts.init(
        document.getElementById(DomId)
      );
      let series = [];
      obj.ydata.forEach((item) => {
        series.push({
          name: item.name,
          // stack: "Total",
          data: item.data,
          type: "line",
          // 设置折线颜色
          lineStyle: {
            color: item.color,
            width: 1,
            type: "solid",
          },
          // 设置折点颜色
          itemStyle: {
            color: item.color,
          },
        });
      });
      this.familyUseElecChart.option = {
        tooltip: {
          trigger: "axis",
          formatter: (params) => {
            var relVal = params[0].name;
            for (var i = 0, l = params.length; i < l; i++) {
              relVal +=
                "<br/>" +
                params[i].seriesName +
                " " +
                params[i].marker +
                " " +
                params[i].value +
                " kwh";
            }
            return relVal;
          },
          confine: true, //将tooltip限制在盒子内
          appendToBody: true,
        },
        legend: {
          orient: "horizontal",
          right: "10",
          itemWidth: 6,
          itemHeight: 6,
          icon: "circle",
          textStyle: {
            color: "#fff",
          },
          show: false,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: obj.xdata,
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(235, 235, 235, 0.1)",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: "#fff",
            // fontSize: 12,
            // fontWeight: 400,
          },
        },
        yAxis: {
          type: "value",
          name: "kwh",
          nameTextStyle: {
            color: "#fff",
            padding: [0, 20, 0, 0],
          },
          axisLabel: {
            color: "#fff",
            // fontSize: 12,
            // fontWeight: 400,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        series,
        grid: {
          left: 10,
          right: 20,
          bottom: 5,
          top: 30,
          containLabel: true,
        },
      };
      this.familyUseElecChart.setOption(this.familyUseElecChart.option);
      window.addEventListener("resize", this.handleResize);
    },
    // 报警类型统计
    setAlarmType(obj, DomId) {
      let that = this;
      this.alarmTypeChart = this.$echarts.init(document.getElementById(DomId));
      let data = [];
      obj.xdata.forEach((item, index) => {
        data.push({
          value: obj.ydata[index],
          name: item,
          itemStyle: {
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: colors0[index] },
              { offset: 1, color: colors1[index] },
            ]),
          },
        });
      });
      // this.alarmTypeChart.option = {
      //   tooltip: {
      //     trigger: "item",
      //   },
      //   legend: {
      //     orient: "vertical",
      //     top: "center",
      //     right: "15%",
      //     itemWidth: 6,
      //     itemHeight: 6,
      //     icon: "circle",
      //     textStyle: {
      //       color: "#fff",
      //     },
      //   },
      //   series: [
      //     {
      //       name: "",
      //       type: "pie",
      //       radius: "65%",
      //       // radius: ["40%", "65%"],
      //       avoidLabelOverlap: false,
      //       itemStyle: {
      //         normal: {
      //           borderRadius: 5,
      //           // color: function (params) {
      //           //   return colors[params.dataIndex % colors.length];
      //           // },
      //         },
      //       },
      //       label: {
      //         show: false,
      //         position: "center",
      //       },
      //       labelLine: {
      //         show: false,
      //       },
      //       left: "-25%",
      //       data,
      //     },
      //   ],
      // };
      this.alarmTypeChart.option = {
        tooltip: {
          trigger: "item",
        },
        xAxis: {
          type: "category",
          data: obj.xdata,
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(235, 235, 235, 0.1)",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: "#fff",
            formatter: function (value) {
              var ret = ""; //拼接加\n返回的类目项
              var maxLength = 2; //每项显示文字个数
              var valLength = value.length; //X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
              if (rowN > 1) {
                //如果类目项的文字大于3,
                for (var i = 0; i < rowN; i++) {
                  var temp = ""; //每次截取的字符串
                  var start = i * maxLength; //开始截取的位置
                  var end = start + maxLength; //结束截取的位置
                  temp = value.substring(start, end) + "\n";
                  ret += temp; //最终的字符串
                }
                return ret;
              } else {
                return value;
              }
            },
            // fontSize: 12,
            // fontWeight: 400,
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#fff",
            // fontSize: 12,
            // fontWeight: 400,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            data: obj.ydata,
            type: "bar",
            barWidth: 20, // 柱子宽度
            // itemStyle: {
            //   color: {
            //     type: "linear",
            //     x: 0, //右
            //     y: 0, //下
            //     x2: 0, //左
            //     y2: 1, //上
            //     colorStops: [
            //       {
            //         offset: 0,
            //         color: "rgba(64, 100, 255, 1)", // 70% 处的颜色
            //       },
            //       {
            //         offset: 1,
            //         color: "rgba(64, 100, 255, 0)", // 100% 处的颜色
            //       },
            //     ],
            //   },
            // },
            itemStyle: {
              color: function (params) {
                return new that.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, //y->y2
                  [
                    {
                      offset: 0,
                      color: colorList1[params.dataIndex],
                    },
                    {
                      offset: 1,
                      color: colorList2[params.dataIndex],
                    },
                  ],
                  false
                );
              },
            },
          },
        ],
        grid: {
          left: 5,
          right: 10,
          bottom: -10,
          top: 15,
          containLabel: true,
        },
      };
      this.alarmTypeChart.setOption(this.alarmTypeChart.option);
      window.addEventListener("resize", this.handleResize);
    },
    // 用电量分析
    setElecAnalysis(obj, DomId) {
      this.elecAnalysisChart = this.$echarts.init(
        document.getElementById(DomId)
      );
      this.elecAnalysisChart.option = {
        tooltip: {
          trigger: "item",
        },
        xAxis: {
          type: "category",
          data: obj.xdata,
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(235, 235, 235, 0.1)",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: "#fff",
            // fontSize: 12,
            // fontWeight: 400,
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#fff",
            // fontSize: 12,
            // fontWeight: 400,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            data: obj.ydata,
            type: "bar",
            barWidth: 20, // 柱子宽度
            itemStyle: {
              color: {
                type: "linear",
                x: 0, //右
                y: 0, //下
                x2: 0, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(64, 100, 255, 1)", // 70% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(64, 100, 255, 0)", // 100% 处的颜色
                  },
                ],
              },
            },
          },
        ],
        grid: {
          left: 5,
          right: 10,
          bottom: 5,
          top: 10,
          containLabel: true,
        },
      };
      this.elecAnalysisChart.setOption(this.elecAnalysisChart.option);
      window.addEventListener("resize", this.handleResize);
    },
    // 报警统计
    setAlarmStatistics(obj, DomId) {
      this.alarmStatisticsChart = this.$echarts.init(
        document.getElementById(DomId)
      );
      this.alarmStatisticsChart.option = {
        tooltip: {
          trigger: "item",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: obj.xdata,
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(235, 235, 235, 0.1)",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: "#fff",
            interval: 0,
            // fontSize: 12,
            // fontWeight: 400,
          },
        },
        yAxis: {
          type: "value",
          minInterval: 1,
          axisLabel: {
            color: "#fff",
            // fontSize: 12,
            // fontWeight: 400,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            data: obj.ydata,
            type: "line",
            // 设置折线颜色
            lineStyle: {
              color: "#EBAF78",
              width: 1,
              type: "solid",
            },
            // 设置折点颜色
            itemStyle: {
              color: "#EBAF78",
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0, //右
                y: 0, //下
                x2: 0, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(235, 175, 120, 0.6)", // 70% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(235, 175, 120, 0)", // 100% 处的颜色
                  },
                ],
              },
            },
          },
        ],
        grid: {
          left: 5,
          right: 15,
          bottom: 5,
          top: 10,
          containLabel: true,
        },
      };
      this.alarmStatisticsChart.setOption(this.alarmStatisticsChart.option);
      window.addEventListener("resize", this.handleResize);
    },
  },
};
